<template>
  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane label="家具" name="first"></el-tab-pane>
    <el-tab-pane label="家居" name="second"></el-tab-pane>
  </el-tabs>
  <el-table :data="tableData" stripe style="width: 100%">
    <el-table-column prop="name" label="分类名称" width="150" />
    <el-table-column prop="value" label="分类编码" width="150" />
    <el-table-column prop="fnjiType" label="主类目编号" width="120" />
    <el-table-column label="操作">
      <!-- 自定义渲染表格内容 -->
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
          编辑
        </el-button>
        <el-button
          :disabled="scope.row.saveType"
          type="primary"
          size="small"
          @click="handleProductSave(scope.row,scope.$index)"
        >
          {{ scope.row.saveType ? "商品已转存" : "转存分类商品" }}
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
<script setup>
import { ref } from "vue";
import {
  categoryBatch,
  categoryGet,
  fnjiCategoryGet,
  fnjiProductGet,
} from "../../api/category";

const activeName = ref("first");
const tableData = ref([]);

//首屏数据加载
let res = await categoryGet(1); //顶层await
console.log(res);
tableData.value = res.data.results;

// 分类菜单点击
const handleClick = async (tab) => {
  console.log(tab.index);
  let type = Number(tab.index) + 1;
  //1. 获取第三方接口数据
  // let res = await fnjiCategoryGet(type)

  //2. 将三方数据，批量转存至LeanCloud
  // console.log(res.data.data); //此处的语法根据接口会发生变化，自己观察res的格式
  // categoryBatch(res.data.data,type)

  // 3. 数据转存完毕后，前两步的代码，切记注释，避免反复转存重复的数据

  // 4. 从LeanCloud加载并呈现分类数据
  let res1 = await categoryGet(type);
  console.log(res1);
  tableData.value = res1.data.results; //将LeanCloud数据设置给表格组件
};

// 转存分类对应的商品
const handleProductSave = async (row,idx) => {
  console.log("当前按钮对应行的数据包", row);
  await fnjiProductGet(row.value, row.fnjiType, row.objectId);
  //更新本地数据状态
  tableData.value[idx].saveType = 1  
};
</script>

<style>
.demo-tabs > .el-tabs__content {
  padding: 0;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>
